<template>
  <div class="record">
    <header>
      <BaseNavBar title="申请记录" :is-nav="true" />
    </header>
    <section class="record_main">
      <section class="record_main_list">
        <Card>
          <section class="record_main_list_item" v-for="item in recordList" :key="item?.id">
            <section class="info">
              <section class="record_main_list_item_content">
                <img class="record_main_list_item_avatar"
                  :src="userId !== item?.friendId ? item?.receiveAvatar : item?.sendAvatar" />
                <span class="record_main_list_item_name">
                  {{ userId !== item?.friendId ? item?.receiveNickName : item?.sendNickName }}&nbsp;
                </span>
                <template v-if="userId !== item?.friendId">
                  <van-tag plain type="primary" v-if="item?.receiveSex === 1">男</van-tag>
                  <van-tag plain color="pink" v-if="item?.receiveSex === 2">女</van-tag>
                </template>
                <template v-else>
                  <van-tag plain type="primary" v-if="item?.sendSex === 1">男</van-tag>
                  <van-tag plain color="pink" v-if="item?.sendSex === 2">女</van-tag>
                </template>
              </section>
              <section class="action">
                <span class="status" v-if="item?.status === 1" style="color: sandybrown">申请中</span>
                <span class="status" v-if="item?.status === 2" style="color: seagreen">已同意</span>
                <span class="status" v-if="item?.status === 3" style="color: #f50;">拒绝</span>
                <van-space v-if="item?.friendId === userId">
                  <van-button type="primary" size="mini" :disabled="item?.status !== 1" round
                    @click="handleAudit(item)">审核好友申请</van-button>
                </van-space>
              </section>
            </section>
            <p class="remark">申请时间：{{ item?.createTime }}</p>
            <p class="remark" v-if="item?.remark">申请备注：{{ item?.remark }}</p>
            <p class="result" v-if="item?.result">申请结果：{{ item?.result }}</p>
          </section>
        </Card>
      </section>
    </section>

    <van-dialog v-model:show="show" title="审核好友" show-cancel-button @confirm="handleConfirm" @cancel="handleCancel">
      <van-form>
        <van-cell-group inset>
          <van-field name="status" label="审核状态">
            <template #input>
              <van-radio-group v-model="formState.status" direction="horizontal">
                <van-radio :name="2">同意</van-radio>
                <van-radio :name="3">拒绝</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field type="textarea" v-model="formState.result" name="result" label="审核结果" placeholder="请输入审核结果" />
        </van-cell-group>
      </van-form>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted} from 'vue';
import { showToast } from "vant";
import BaseNavBar from '@/components/BaseNavBar/index.vue';
import Card from '@/components/Card/index.vue';
import { getShipList, auditShip } from '@/apis/ship';
import { getUserInfo } from '@/apis/user';

const recordList = ref([]);
const userId = ref(null);

const ship = ref({});

const show = ref(false);

const formState = ref({
  status: "",
  result: "",
});

const init = async () => {
  try {
    const res = await getShipList({
        pageNum: 1,
        pageSize: 9999,
      });
      if (res?.code === 200) {
        recordList.value = res?.data?.list;
      }

  } catch (error) {
    console.log(error, 'init-error');

  }
};

const getUerInfo = async () => {
  try {
    const res = await getUserInfo();
    if (res?.code === 200) {
      console.log(res?.data);
      userId.value = res?.data?.id;
    }
  } catch (error) {
    console.log(error, 'getUerInfo-error');

  }
}

const handleAudit = (item) => {
  ship.value = item;
  show.value = true;
};

const handleConfirm = async () => {
  try {
    const res = await auditShip({
      id: ship.value?.id,
      status: formState.value.status,
      result: formState.value.result
    })
    if (res?.code === 200) {
      formState.value = {};
      ship.value = {};
      showToast('审核成功');
      init();
      return;
    }
    showToast(res?.msg);

  } catch (error) {
    console.log(error, 'audit-error');

  }
};

const handleCancel = () => {
  show.value = false;
  ship.value = {};
  formState.value = {};
};
onMounted(() => {
  init();
  getUerInfo();
});
</script>

<style lang="less" scoped>
.record {
  &_main {
    margin-top: 8px;

    &_list {
      width: 96%;
      margin: 0 auto;

      &_item {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 4px;
        border-bottom: 1px #eee solid;

        &_avatar {
          width: 36px;
          height: 36px;
          border-radius: 50%;
        }

        &_content {
          width: 200px;
          height: 100%;
          display: flex;
          align-items: center;
        }

        &_name {
          font-size: 14px;
          color: #333;
          margin-left: 8px;
        }

      }
    }
  }
}

.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.remark {
  margin-top: 4px;
  font-size: 12px;
  color: #666;
}

.result {
  font-size: 12px;
  color: #666;
}

.action {
  width: 80px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.status {
  font-size: 14px;
}
</style>
